<template>
  <div style="margin-top: 20px;margin-bottom: 30px">
    <div style="width: 30%">
      <el-upload
        class="avatar-uploader"
        action="http://47.106.183.36:8080/minio/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :headers="headers"
      >
        <img v-if="formInline.cover" :src="formInline.cover" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
      <div class="el-upload__tip" style="font-size: 15px;margin-bottom: 15px">
        优质的封面有利于推荐，格式支持JPG、PNG
      </div>
    </div>
    <div style="width: 100%">
      <el-form     ref="ruleFormRef"
                   :inline="true" :model="formInline">
        <div class="demo-form-inline">
          <el-form-item class="formItem" v-for="(item,index) in formItems" :prop="item.prop"
                        :label="item.label" :key="index"  :rules="item.rules"
          >
            <template v-if="item.type === 'input'">
              <el-input v-model="formInline[item.prop]" />
            </template>
            <template v-else-if="item.type === 'radio'">
              <el-radio-group v-model="formInline[item.prop]">
                <el-radio v-for="(option, key) in item.options" :key="key" :value="option.value">
                  {{ option.label }}
                </el-radio>
              </el-radio-group>
            </template>
            <template v-else-if="item.type === 'select'">
              <el-select v-model="formInline[item.prop]" placeholder="请选择">
                <el-option v-for="(option, key) in item.options" :key="key" :label="option.lable" :value="option.value"/>
              </el-select>
            </template>
          </el-form-item>
        </div>
      </el-form>
      <div style="text-align: center">
        <el-button  type="primary" style="background-color: #16b78e;" @click="onSubmit(ruleFormRef)">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Plus, UploadFilled} from '@element-plus/icons-vue'
import {ref} from 'vue'
import request from '@/utils/request.js'
import {ElMessage} from "element-plus";

let token =
  window.localStorage.getItem('user') || window.sessionStorage.getItem('user')
token = JSON.parse(token).user
const headers=ref({
  token
})


const formInline = ref({
  cover:'',
  petName: '',
  variety: '',
  sex: '',
  area: '',
  age: '',
  vaccination: '',
  sterilization: '',
  status: '',
  phone: '',
  wx: '',
  email: '',
  comment: '',
})
const ruleFormRef = ref()
const url=ref('')

const handleAvatarSuccess= (
  response,
  uploadFile
) => {
  console.log(response,uploadFile,123)
  formInline.value.cover = response.data.fileUrl[0]
}

const onSubmit=async (formEl)=>{
  console.log(formEl,123)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      request.post('/adoption/publish',formInline.value).then(res=>{
        ElMessage({
          type: res.msg,
          message: res.msg,
        })
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const rules = [
  {
    required: true,
    message: '请输入',
    trigger: 'blur',
  },
]

const formItems = [
  {prop: 'petName', label: '宠物姓名',rules,type: 'input'},
  {prop: 'variety', label: '品种', rules,type: 'input'},
  {
    prop: 'sex', label: '性别',rules, type: 'radio', options: [
      {label: '公', value: '公'},
      {label: '母', value: '母'}
    ]
  },
  {prop:'area',label: '地区',rules,type:'select', options: [
      { label: '北京', value: '北京' },
      { label: '天津', value: '天津' },
      { label: '河北', value: '河北' },
      { label: '山西', value: '山西' },
      { label: '内蒙古', value: '内蒙古' },
      { label: '辽宁', value: '辽宁' },
      { label: '吉林', value: '吉林' },
      { label: '黑龙江', value: '黑龙江' },
      { label: '上海', value: '上海' },
      { label: '江苏', value: '江苏' },
      { label: '浙江', value: '浙江' },
      { label: '安徽', value: '安徽' },
      { label: '福建', value: '福建' },
      { label: '江西', value: '江西' },
      { label: '山东', value: '山东' },
      { label: '河南', value: '河南' },
      { label: '湖北', value: '湖北' },
      { label: '湖南', value: '湖南' },
      { label: '广东', value: '广东' },
      { label: '广西', value: '广西' },
      { label: '海南', value: '海南' },
      { label: '重庆', value: '重庆' },
      { label: '四川', value: '四川' },
      { label: '贵州', value: '贵州' },
      { label: '云南', value: '云南' },
      { label: '西藏', value: '西藏' },
      { label: '陕西', value: '陕西' },
      { label: '甘肃', value: '甘肃' },
      { label: '青海', value: '青海' },
      { label: '宁夏', value: '宁夏' },
      { label: '新疆', value: '新疆' },
      { label: '台湾', value: '台湾' },
      { label: '香港', value: '香港' },
      { label: '澳门', value: '澳门' }
    ]
  },
  {prop:'age',label: '年龄',rules,type:'radio', options: [
      {label: '3个月以下', value: '3个月以下'},
      {label: '3-6个月', value: '3-6个月'},
      {label: '6个月以上', value: '6个月以上'}
    ]},
  {prop:'vaccination',label: '疫苗',rules,type:'radio', options: [
      {label: '3针疫苗', value: '3针疫苗'},
      {label: '2针疫苗', value: '2针疫苗'},
      {label: '1针疫苗', value: '2针疫苗'},
      {label: '未接种疫苗', value: '未接种疫苗'},
    ]},
  {prop:'sterilization',label: '绝育',rules,type:'radio', options: [
      {label: '已绝育', value: '已绝育'},
      {label: '未绝育', value: '未绝育'}
    ]},
  {prop:'status',label: '驱虫',rules,type:'radio', options: [
      {label: '已驱虫', value: '已驱虫'},
      {label: '未驱虫', value: '未驱虫'}
    ]},
  {prop:'phone',label: '手机号',rules,type:'input'},
  {prop:'wx',label: '微信号',type:'input'},
  {prop:'email',label: '邮箱',type:'input'},
  {prop:'comment',label: '备注',type:'input'},
]

</script>

<style scoped>
.demo-form-inline {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.formItem {
  width: 40%;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
 }

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>